<template>
    <div class="help-wrapper">
        <Input
            v-model="searchValue"
            placeholder="请输入想要搜索的问题"
            icon="ios-search-strong"
            @on-enter="handleSearch"
            @on-click="handleSearch"
            style="width: 100%"></Input>
        <!--搜索输入框end-->

        <div class="hs-container">
            <div :class="{
                    'hs-menu': true,
                    'is-collapse': collapse
                }">
                <Card class="no-border-card" >
                    <div slot="title" style="border-radius:0px">
                        <div class="hs-menu-title">
                            <span v-show="!collapse">
                                手册目录
                                <Icon type="load-c" class="loading-loop" v-show="loading"></Icon>
                            </span>
                            <Icon type="navicon-round" @click="handleCollapse"></Icon>
                        </div>
                    </div>
                    <div v-if="list.length === 0 && !collapse" style="padding-left:10px">暂无内容</div>
                    <Collapse v-show="!collapse" v-model="questionValue" style="margin-top:-17px;background-color:#fff" accordion v-else >
                        <Panel v-for="parent in list" :key="parent.id" :name="parent.name">
                            <Tooltip :content="parent.name" placement="right">
                                <span :class="{
                                    text_active:questionValue[0] === parent.name,
                                    'hs-class-name': true,
                                    'text-collapse': true
                                }">{{parent.name}}</span>
                            </Tooltip>

                            <ol slot="content" class="question-list">
                                <li
                                    v-for="(it,idx) in parent.tips"
                                    @click="handleOpen(it.id, parent.name)"
                                    :class="{ text_active:(currentItem && currentItem.id) === it.id }"
                                    :key="idx">
                                    <Tooltip :content="it.title" placement="right">
                                        <span class="text-collapse hs-tip-name">{{it.title}}</span>
                                    </Tooltip>
                                </li>
                            </ol>
                        </Panel>
                    </Collapse>
                </Card>
            </div>
            <div class="hs-content">
                <Spin fix v-if="loadingTip"></Spin>
                <Card class="no-border-card">
                    <p slot="title" style="border-left:none;font-size:14px">
                        <span v-if="currentItem">{{currentParent}} > {{currentItem.title}}</span>
                        <span v-else>暂无内容</span>
                    </p>
                    <p class="hs-date">{{currentItem && currentItem.created_at | date('YYYY-MM-DD HH:mm')}}</p>
                    <p class="question-content" v-if="currentItem" v-html="currentItem.message"></p>
                </Card>
            </div>
        </div>
    </div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'

export default {
  name: 'help-space-handbook',
  data () {
    return {
      searchValue: '',
      questionValue: [],
      currentItem: {},
      currentParent: '',
      list: [],
      loading: false,
      loadingTip: false,
      collapse: false
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      this.loading = true
      try {
        this.list = await this.fetchClass()
        let defaultTip
        this.list.some(item => {
          if (item.tips.length) {
            this.questionValue = [item.name]
            this.currentParent = item.name
            defaultTip = item.tips[0]
            return true
          }
        })
        if (defaultTip && defaultTip.id) {
          await this.fetchTip(defaultTip.id)
        }
      } catch (err) {
        this.$Message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    fetchTips (params) {
      return new Promise((resolve, reject) => {
        http.request(this, api.tips, null, params, (res, err) => {
          if (err) {
            reject(new Error('获取失败'))
          } else {
            resolve(res.rows)
          }
        })
      })
    },
    async fetchTip (id) {
      if (this.loadingTip) return
      this.loadingTip = true
      try {
        this.currentItem = await http.req(api.tip, [id], null)
      } catch (err) {
        console.log(err)
      } finally {
        this.loadingTip = false
      }
    },
    fetchClass () {
      return new Promise((resolve, reject) => {
        http.request(this, api.tip_class, null, { type: 1 }, (res, err) => {
          if (err) {
            reject(new Error('获取失败'))
          } else {
            resolve(res.rows)
          }
        })
      })
    },
    handleOpen (id, name) {
      this.currentParent = name
      this.fetchTip(id)
    },
    async handleSearch () {
      if (this.searchValue) {
        this.loading = true
        try {
          this.currentItem = {}
          const list = await this.fetchTips({ keyword: this.searchValue, type: 1 })
          this.list = [
            {
              id: 0,
              name: '搜索结果',
              tips: list
            }
          ]
          this.$nextTick(() => {
            this.questionValue = ['搜索结果']
          })
        } catch (err) {
          console.log(err)
        }
        this.loading = false
      } else {
        this.initData()
      }
    },
    handleCollapse () {
      this.collapse = !this.collapse
    }
  }
}
</script>

